<template>
  <!-- <div class='container'>组题列表</div> -->
  <div class="question-container ">
    <el-card>
      <!-- 顶部搜索框 -->
      <el-form>
        <el-row type="flex">
          <el-col>
            <el-form-item label="关键字">
              <el-input v-model="keyword" style="width:250px" placeholder="根据编号搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button @click="reset">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 记录提示信息 -->
      <template>
        <el-alert :title="`数据一共有${questionsData.counts}条`" type="info" show-icon style="margin-bottom:15px">
        </el-alert>
      </template>
      <!-- 表格部分 -->
      <template>
        <el-table :data="questionsData.items" style="width: 100%">
          <el-table-column prop="id" label="编号" width="220px">
          </el-table-column>
          <el-table-column label="题型" width="80px">
            <template slot-scope="scope">
              <!-- 遍历题型数组匹配替换 -->
              {{ questionType.find(item => item.value === +scope.row.questionType).label }}
            </template>
          </el-table-column>
          <el-table-column label="题目编号">
            <!-- 题目编号是个数组所以v-for遍历出来 -->
            <template slot-scope="scope">
              <div v-for="item in scope.row.questionIDs" :key="item.number">
                <a href="#" @click="getdetail(item.id)" style="color:#409EFF;">{{ item.number }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180px">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)">
          </el-table-column>
          <el-table-column prop="userName" label="录入人">
          </el-table-column>
          <el-table-column label="操作" width="80px">
            <template slot-scope="scope">
              <el-button type="danger" @click="deletquestion(scope.row.id)" plain icon="el-icon-delete"
                circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
      </template>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="+questionsData.page" :page-sizes="[15, 20, 25, 30]" :page-size="+questionsData.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="questionsData.counts">
      </el-pagination>
    </el-card>
    <!-- 弹出层 -->
    <questionsPreview :show-dialog.sync="showDialog" :data="infodata"></questionsPreview>
  </div>
</template>

<script>
// 接口引入
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
// 转换数据引入
// questionType 题型转化
import { questionType } from '@/api/hmmm/constants'
// 预览组件引入
import questionsPreview from '../components/questions-preview'
export default {
  data() {
    return {
      // 组题列表数据(因为请求回来的数据包含分页器所需数据所以直接使用返回数据覆盖即可)
      questionsData: {
        counts: null,//总条数
        page: 1,//当前页数
        pagesize: "20"//每页显示条数
      },
      keyword: null,//为了搜索框查询
      // 题型转换数据
      questionType,
      showDialog: false,
      infodata: {}
    }
  },

  components: {
    questionsPreview
  },
  created() {
    this.getrandoms()
  },
  methods: {
    // 获取组题列表信息
    async getrandoms() {
      let result = await randoms({ page: this.questionsData.page, pagesize: this.questionsData.pagesize, keyword: this.keyword })
      console.log(result);
      this.questionsData = result.data
      // this.total = result.total
    },
    // 条数改变触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.questionsData.pagesize = val
      this.getrandoms()
    },
    // 页数改变触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.questionsData.page = val
      this.getrandoms()
    },
    // 题组删除
    deletquestion(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await removeRandoms({ id })
          this.$message.success('删除成功');
          this.getrandoms()
        } catch {
          this.$message.success('删除失败');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    // 预览组件获取试题详情
    async getdetail(id) {
      console.log(id);
      this.infodata = (await detail({ id })).data
      this.showDialog = true
      console.log(this.infodata);

    },
    // 搜索功能
    search() {
      if (this.keyword) {//先判断是否有值
        this.questionsData.page = 1
        this.getrandoms()
      }
    },
    // 重置功能
    reset() {
      this.keyword = null//将关键字置空
      this.getrandoms()//重新调用渲染数据
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.question-container {
  margin: 10px;
}
</style>
